<template>
  <div class="component-root-container">
    <el-header>
      <el-form ref="procurementRule" :rules="procurementRule" :model="procurement" label-width="130px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="结算单号:" prop="settlementCode">
              <el-input v-model="procurement['settlementCode']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票金额(不含税):" prop="invoiceNakedAmount">
              <el-input v-model.number="procurement['invoiceNakedAmount']" placeholder="请输入" @input="change($event)"
                clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发票金额(含税):" prop="invoiceAmount">
              <el-input v-model.number="procurement['invoiceAmount']" placeholder="请输入" @input="change($event)"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                  查询
                </el-button>
                <el-button class="query" @click="reset">
                  重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>

    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ queryCount }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>

      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">通过实时检查采购订单和收货单、采购订单和发票单的三单关系，保证采购及入库的数量以及付款比例正确性，并通知操作者及时修改。</div>
          </div>
          <div class="page-tip">
            <div class="params-tip"><span>示例参数</span>：结算单号：2019082003184821621916268，发票金额（不含税）：0，发票金额（含税）：0</div>
          </div>
        </el-row>
      </div>
    </el-main>
    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description" v-show="dialogVisible">
              <el-row>
                <el-col>
                  结算单号：{{ dialog.title }}
                </el-col>
              </el-row>
              <el-row v-for="(item,index) in dialog.content" :key="index">
                <el-col>
                  采购订单号：{{item.orderNo}}
                </el-col>
                <el-col>
                  结果: {{ item.result || '无' }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

  </div>
</template>

<script>
  export default {
    data() {
      const invoiceNakedChange = (rule, value, callback) => {
        const regular = /^\d{0,9}?$/g
        if (!regular.test(value)) {
          return callback(new Error('发票金额(不含税)只能输入数字'))
        }
        callback()
      }
      return {
        dialogVisible: false,
        queryCount:0,
        procurement: {
          settlementCode: '',
          invoiceNakedAmount: '',
          invoiceAmount: ''
        },
        dialog: {
          title: '',
          content: []
        },
        procurementRule: {
          settlementCode: [{
            required: true,
            message: '请输入结算单号',
            trigger: 'blur'
          }],
          invoiceNakedAmount: [{
            required: true,
            message: '请输入发票金额',
            trigger: 'blur'
          }],
          invoiceAmount: [{
            required: true,
            message: '请输入发票金额',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('1.2')
    },
    mounted() {},
    methods: {
      async buttonClick() {
        try {
          this.dialog = {
            title: '',
            content: []
          }
          await this.$refs['procurementRule'].validate()
          const data = {
            datas: [{
              settlementCode: this.procurement['settlementCode'],
              invoiceNakedAmount: this.procurement['invoiceNakedAmount'],
              invoiceAmount: this.procurement['invoiceAmount']
              // settlementCode: '222222',
              // invoiceNakedAmount: 23,
              // invoiceAmount: 32
            }]
          }
          const r = await this.$http({
            url: this.$http.adornBizUrl('/supplier/findResulteBySettlementCode'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if (r.data.data.length > 0) {
            this.dialog.title = r.data.data[0].settlementCode
            if (r.data.data.length) {
              this.dialog.content = r.data.data
            }
          }
          this.dialogVisible = true
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      reset() {
        this.dialogVisible = false
        this.procurement = {
          settlementCode: '',
          invoiceNakedAmount: '',
          invoiceAmount: ''
        }
        this.dialog = {
          title: '',
          content: []
        }
        this.$refs['procurementRule'].clearValidate();
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.queryCount=result.cnt||'0';
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(130px, 60%, right);
  .el-input {
    width: 60%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: rgba(235, 75, 75, 1);
  }

  .custom-button {
    display: flex;
    justify-content: center;
  }
</style>
